import React from 'react';
import { render, fireEvent, screen } from '@testing-library/react';
import MovieDetail from '../components/MovieDetail';
import { BrowserRouter } from 'react-router-dom';

// Mock fetch
global.fetch = jest.fn(() =>
    Promise.resolve({
        json: () => Promise.resolve({ message: 'Success' }),
    }),
);

describe('MovieDetail Component', () => {
    const mockLocationState = {
        title: 'Test Movie',
        description: 'Description of Test Movie',
        genre: ['Action', 'Drama'],
        rating: 5,
        image: 'test_image_url',
    };

    beforeEach(() => {
        fetch.mockClear();
        render(
            <BrowserRouter>
                <MovieDetail />
            </BrowserRouter>
        );
    });

    test('renders movie details correctly', () => {
        expect(screen.getByText('Test Movie')).toBeInTheDocument();
        expect(screen.getByText('Description of Test Movie')).toBeInTheDocument();
        expect(screen.getByText('Action')).toBeInTheDocument();
        expect(screen.getByText('Drama')).toBeInTheDocument();
    });

    test('handles rating change', () => {
        fireEvent.click(screen.getAllByLabelText('4 stars')[0]);
        expect(screen.getByLabelText('4 stars').value).toBe('4');
    });

    test('handles submit with successful response', async () => {
        fireEvent.click(screen.getByText('Submit'));
        expect(fetch).toHaveBeenCalledWith(expect.anything(), expect.anything());
        await screen.findByText('Success');
        expect(screen.getByText('Success')).toBeInTheDocument();
    });

    // Additional tests can be added here for error handling, other interactions, etc.
});
